﻿<template>
    <svg aria-hidden="true" :class="className" :width="width" :height="height" :color="color">
        <use :xlink:href="symbolId" />
    </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(
    defineProps<{
        name: string;
        className?: string;
        width?: number;
        height?: number;
        color?: string;
    }>(),
    {
        name: '',
        className: '',
        width: 16,
        height: 16,
        color: '#000',
    }
);

const symbolId = computed(() => `#icon-${props.name}`);
</script>
